<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    setInterval(function() {
        $.ajax({
            url: "/get_new_messages",
            type: "GET",
            success: function(data) {
                $('.messages').html(data);
            }
        });
    }, 2000);  // 5秒钟请求一次新的数据
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/go.min.js"></script>

<script>hljs.highlightAll();</script>
<!DOCTYPE html>
<html>
<head>
    <title>Messages</title>
    <style>
        .messages {
            height: 100%; 
            overflow-y: auto;
            padding: 10px;
            margin: 10px;
        }

        .message {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            height: auto;
        }

        pre {
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            border-left: 3px solid #f36d33;
            color: #666;
            page-break-inside: avoid;
            font-family: monospace;
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 1.6em;
            max-width: 100%;
            overflow: auto;
            padding: 1em 1.5em;
            display: block;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="messages">
        {% for message in messages %}
        <div class="message">
            <p><strong>Time: </strong>{{ message['time'] }}</p>
            <p><strong>Sender: </strong>{{ message['sender'] }}</p>
            <p><strong>Receiver: </strong>{{ message['receiver'] }}</p>
            <p><strong>Content: </strong>
                <pre><code>{{ message['content'].replace('\n', '<br>') | safe }}</code></pre></p>
        </div>
        {% endfor %}
    </div>
</body>
</html>